<template>
  <el-container>
    <el-header>
      <el-menu :default-active="$route.path" router mode="horizontal">
        <el-menu-item><img  style="position: absolute;width: 125px;margin-top: 10px;" src="../assets/img.png" @click="toHomePage()" alt></el-menu-item>
        <el-menu-item style="margin-left: 200px;font-size: 17px;color: #2874cb;">我的课堂</el-menu-item>
        <div class="h-right">
          <div style="float: left;"><a href="https://ktp.paper880.com/" style="text-decoration: none;color: black;"><i class="el-icon-search"></i>论文查重</a></div>
          <div>
          <span style="margin-left: 25px;cursor:pointer;" @click="toTaskManagement"><i class="el-icon-document"></i>任务管理</span>
          <span style="margin: 0 12px;"><i class="el-icon-bell"></i></span>欢迎您,
            <el-dropdown>
              <span class="el-dropdown-link"><i class="el-icon-s-custom"></i>{{this.userInfo.name}}</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><span @click="goSettings()"><i class="el-icon-s-tools"></i>个人设置</span></el-dropdown-item>
                <el-dropdown-item><span @click="logout()"><i class="el-icon-remove"></i>退出登录</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-menu>
    </el-header>
    <el-main class="concise-background">
      <div class="scroll-div">
        <div class="top-handler">
          <h2 style="margin-left: 25px;color: #615e5e;">置顶课程</h2>
          <div v-if="userInfo.role === '学生'" style="float: right;margin-right: 25px;margin-top: -50px">
            <button type="button" class="el-button el-button--primary el-button--medium">
              <span @click="joinCourse()" id="sJoinC"><i class="el-icon-plus"></i>&nbsp加入课程</span>
            </button>
          </div>
          <div v-else  style="float: right;margin-right: 25px;margin-top: -50px">
            <el-dropdown>
              <span class="el-dropdown-link">
            <button type="button" class="el-button el-button--primary el-button--medium">
              <i class="el-icon-plus"></i>
              <span>创建/加入课程</span>
            </button>
             </span>
              <el-dropdown-menu slot="dropdown">
              <el-dropdown-item><span @click="createCourse()" id="createC">创建课程</span></el-dropdown-item>
              <el-dropdown-item><span @click="joinCourse()" id="joinC">加入课程</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-form v-model="courseMessage" class="create">
            <div style="margin: 25px;font-size: 20px;padding-bottom: -5px">
              <span><strong>创建课程</strong></span>
              <el-icon id="close" style="float: right;margin-right: 15px;font-size: 36px;cursor:pointer;" class="el-icon-close"></el-icon>
            </div>
            <hr>
            <el-tabs v-model="activeName" class="left-distance" style="width: 95px">
              <el-tab-pane label="基本信息(必填)" name="first"></el-tab-pane>
            </el-tabs>
            <el-form-item label="*课程名称" style="margin-left: 25px;" prop="name">
              <el-input v-model="courseMessage.courseName" style="width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="*教学班级" style="margin-left: 25px;" prop="name">
              <el-input v-model="courseMessage.className" style="width: 90%"></el-input>
            </el-form-item>
            <el-form-item label="*选择学年-学期" style="z-index: 9999;" class="left-distance" prop="name">
              <el-select id="learnYear" v-model="courseMessage.year" placeholder="请选择学年">
                <el-option label="2021-2022" value="2021-2022"></el-option>
                <el-option label="2022-2023" value="2022-2023"></el-option>
                <el-option label="2023-2024" value="2023-2024"></el-option>
                <el-option label="2024-2025" value="2024-2025"></el-option>
              </el-select>
              <el-select v-model="courseMessage.term" placeholder="请选择学期">
                <el-option label="第一学期" value="第一学期"></el-option>
                <el-option label="第二学期" value="第二学期"></el-option>
              </el-select>
            </el-form-item>
            <hr>
            <div style="float: right;margin-right: 25px;">
            <el-button id="cancel">取消</el-button>
            <el-button class="el-button--primary" id="confirmCreate" @click="addCourse">确定</el-button>
            </div>
          </el-form>
        </div>
        <el-form class="join">
          <div style="margin: 25px;font-size: 20px;padding-bottom: -5px">
            <span><strong>加入课程</strong></span>
            <el-icon id="close1" style="float: right;margin-right: 15px;font-size: 36px;cursor:pointer;" class="el-icon-close"></el-icon>
          </div>
          <hr>
          <el-form-item label="*加课码" style="margin-left: 25px;" prop="name">
            <el-input v-model="addCourseCode" style="width: 90%"></el-input>
          </el-form-item>
          <hr>
          <div style="float: right;margin-right: 25px;">
            <el-button id="cancel1">取消</el-button>
            <el-button class="el-button--primary" @click="confirmJoin">确定</el-button>
          </div>
        </el-form>
        <div  v-for="lesson in lessons">
          <div style="margin-left: 25px;color: white">
          <div @click="toClassDetail(lesson.courseId)" :class="classObject">
            <div class="header-info">
              <p class="left-distance">{{lesson.term}}</p><!---->
              <h3 title="软件体系结构与设计模式" class="name left-distance">{{lesson.courseName}}</h3>
              <p title="软工21级3，4班" class="classname left-distance">{{lesson.className}}</p>
              <div class="qrcode left-distance">
                <img src="https://www.ketangpai.com/img/qr.0b314396.svg">
                <span style="font-size: 14px;">加课码:{{ lesson.courseId }}</span><!---->
              </div><!---->
              <div class="content-info" style="background-color: white;height: 42.2px"></div>
              <div class="user-info " style="background-color: white;height: 36px;">
                <div class="left left-distance" style="float: left;padding-bottom: 25px;">
                  <span v-if="userInfo.role === '学生'" class="tag-flag role-s" style="color:blue;border: 1px blue solid;">学</span>
                  <span v-else class="tag-flag role-s" style="color:green;border: 1px green solid;">教</span>
                  <span style="cursor: pointer;font-size: 14px;color: black;"> 负责人:{{lesson.teacherName}} </span>
                </div>
                <div class="right" style="float: left;font-size: 14px;">
                  <div class="set-top" style="color: black;margin-left: 160px;margin-top: -44px">取消置顶
                  <div class="handle el-dropdown" style="margin-left: 70px;margin-top:-20px;float:left;">
                    <el-dropdown>
                      <span class="el-dropdown-link"><img src="https://www.ketangpai.com/img/etc.52da4ee0.svg" style="float: left;width: 25px;"></span>
                      <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-if="userInfo.role === '学生'"><li tabindex="-1" class="el-dropdown-menu__item">退课</li></el-dropdown-item>
                        <el-dropdown-item v-else><li tabindex="-1" class="el-dropdown-menu__item" @click="deleteCourse(lesson.courseId)">删除</li></el-dropdown-item>
                        <el-dropdown-item><li tabindex="-1" class="el-dropdown-menu__item"><!---->归档</li></el-dropdown-item>
                      </el-dropdown-menu>
                    </el-dropdown>
                  </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          </div>
        </div>
      </div>
      <div class="between">
        <el-tabs v-model="activeName" style="width: 138px;">
          <el-tab-pane label="我学的" name="first"></el-tab-pane>
          <el-tab-pane label="我协助的" name="second"></el-tab-pane>
        </el-tabs>
        <div style="float: right;margin-top:-49px;">
        <button type="button" class="el-button">归档管理</button>
        <el-input v-model="className" style="width: 180px;" placeholder="搜索我学的课程"><i class="el-icon-search"></i></el-input>
        </div>
      </div>
      <div class="different-term-class">不同学期课程的折叠面板collapse</div>
      <el-collapse v-model="activeTerm" style="width: 1150px;margin: auto;">
        <el-collapse-item title="第一学期" name="1">
          <div>软件需求工程</div>
          <div>计算机导论</div>
        </el-collapse-item>
        <el-collapse-item title="第二学期" name="2">
          <div>开源软件杯</div>
          <div>软件体系结构与设计模式</div>
        </el-collapse-item>
      </el-collapse>
      <router-view/>
    </el-main>
    <div class="bg"></div>
  </el-container>
</template>

<script>
import axios from "axios";
import { ref } from "vue";
export default {
  name: "main",
  setup(){
    const userInfoString = localStorage.getItem('userInfo');
      let userInfo = JSON.parse(userInfoString);
    let isTeacher = ref(false);
    let isStudent = ref(false);
    if(userInfo.role === '老师'){
      isTeacher = ref(true);
    }
    if(userInfo.role === '学生'){
      isStudent = ref(true);
    }
    let classObject = {
      'top-classes-student': isStudent.value,
      'top-classes-teacher': isTeacher.value
    };
    return {isTeacher, isStudent, classObject};
  },
  data(){
    return{
      activeName: 'first',
      className: '',
      activeTerm: '',
      stuId: 25,
      lessons: '',
      courseId: '',
      userInfo: null,
      addCourseCode: '',
      courseMessage: {
        courseName: '',
        className: '',
        year: '',
        term: '',
        teacherName: '',
      }
    }
  },
  methods: {
    deleteCourse(courseId){
      axios.post("http://localhost:8081/course/deleteCourse",{
        courseId: courseId
      }).then(response =>{
        if(response.status === 200){
          this.$message.success("删除成功!");
          this.$router.go(0);
        }
      })
    },
    joinCourse(){
      let link = document.querySelector('#joinC');
      if(this.userInfo.role === '学生'){
        link = document.querySelector('#sJoinC');
      }
      let bg = document.querySelector('.bg');
      let join = document.querySelector('.join');
      let close = document.querySelector("#close1");
      let cancel1 = document.querySelector("#cancel1");
      link.addEventListener("click",function(){
        bg.style.display = 'block';
        join.style.display = 'block';
      })
      close.addEventListener("click",function (){
        bg.style.display = 'none';
        join.style.display = 'none';
      })
      cancel1.addEventListener("click",function (){
        bg.style.display = 'none';
        join.style.display = 'none';
      })
    },
    createCourse(){
      let link = document.querySelector('#createC');
      let bg = document.querySelector(".bg");
      let create = document.querySelector(".create");
      let close = document.querySelector("#close");
      let cancel = document.querySelector("#cancel");
      let confirm = document.querySelector('#confirmCreate');
      link.addEventListener("click",function (){
        bg.style.display = 'block';
        create.style.display = 'block';
      })
      close.addEventListener("click",function (){
        bg.style.display = 'none';
        create.style.display = 'none';
      })
      cancel.addEventListener("click",function (){
        bg.style.display = 'none';
        create.style.display = 'none';
      })
      confirm.addEventListener("click",function (){
        bg.style.display = 'none';
        create.style.display = 'none';
      })
    },
    addCourse(){
      axios.post("http://localhost:8081/course/addCourse",{
        courseName: this.courseMessage.courseName,
        className: this.courseMessage.className,
        teacherId: this.userInfo.id,
        term: this.courseMessage.year + this.courseMessage.term,
        teacherName: this.userInfo.name
      }).then(response =>{
        if(response.status === 200){
          this.$message.success("添加成功!");
          this.$router.go(0);
        }else{
          this.$message.error("添加失败!");
        }
      })
    },
    confirmJoin(){
      axios.post("http://localhost:8081/course/joinCourse",{
        stuId: this.userInfo.stuId,
        courseId: this.addCourseCode
      }).then(response =>{
        if(response.status === 200){
          this.$router.go(0);
        }
        this.$message.success("加入课程成功!");
      })
    },
    toTaskManagement(){
      this.$router.push("/taskManagement")
    },
    toClassDetail(courseId){
      this.$router.push({name:"classDetail",params:{courseId}})
    },
    toHomePage() {
      this.$router.push("/homePage")
    },
    goSettings() {
      this.$router.push("/settings")
    },
    logout() {
      localStorage.removeItem('userInfo')
      this.$router.push("/login")
    },
  },
  mounted() {     //页面加载完成后触发
    // 在组件加载时从LocalStorage中获取用户信息
    const userInfoString = localStorage.getItem('userInfo');
    if (userInfoString) {
      this.userInfo = JSON.parse(userInfoString);
    }
    let url = "http://localhost:8081/course/selectAll";
    if(this.userInfo.role === '老师'){
      url = "http://localhost:8081/course/selectTaughtCourse";
    }
    axios.post(url,{
      stuId: this.userInfo.stuId,
      teacherId: this.userInfo.id
    }).then(response => {
      if(response.status === 200) {
        this.lessons = response.data;
      }else {
        this.lessons = this.userInfo.username;
      }
    })
  }
}
</script>

<style scoped>
/*遮盖层*/
.bg{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0,0,0, 0.4);
  z-index: 666;
  display: none;
}
.create{
  width: 1000px;
  height: 400px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  background: #fff;
  border-radius: 5px;
  display: none;
}
.top-classes-student{
  cursor: pointer;
  background-color: #70b2db;
  width:265px;height: 250px;
  border-radius: 5px;
  margin: 5px 5px;
  float: left;
  border:1px gainsboro solid;
}
.top-classes-teacher{
  cursor: pointer;
  background-color: #fdc40f;
  width:265px;height: 250px;
  border-radius: 5px;
  margin: 5px 5px;
  float: left;
  border:1px gainsboro solid;
}
.join{
  width: 800px;
  height: 200px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;
  background: #fff;
  border-radius: 5px;
  display: none;
}
.left-distance{
  margin-left: 18px;
}
.h-right{
  float: right;
  width: 490px;
  margin-top: 25px;
  font-size: 17px;
}
.el-dropdown-link{
  cursor:pointer;
  color: #409EFF;
}
.scroll-div{
  width: 1150px;
  height: 1000px;
  max-height: 420px;
  overflow-y: auto;
  border-radius: 5px;
  border: 1px solid black;
  margin: auto;
}
.scroll-div::-webkit-scrollbar {
  width: 10px;
  height: 1px;
}
.scroll-div::-webkit-scrollbar-thumb{
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #b8b4b4;
}
.scroll-div::-webkit-scrollbar-track{
  border-radius: 10px;
  background: #e3dfdf;
}
.between{
  width: 1150px;
  height: 78px;
  margin: auto;
}
.different-term-class{
  margin: auto;
  text-align: center;
}
</style>
